<template>
  <div class="ddxq">
    <el-dialog
        title="订单详情"
        :visible.sync="dialogFormVisible"
        width="75%"
        :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :model="form" label-width="120px">
          <div class="flex-bet flex-y-top">
            <div class="bflex-4">
              <div class="shuju_title">
                <div class="shuju_title_text">
                  <span>订单信息</span>
                </div>
              </div>
              <div class="formBox">
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">订单类型：</div>
                  <div>
                    <span><el-tag size="mini" type="success">{{ orderDetail.originName }}</el-tag></span>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">下单渠道：</div>
                  <div>
                    <span><el-tag size="mini" type="success">{{ orderDetail.platformName }}</el-tag></span>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">用户信息：</div>
                  <div>{{ orderDetail.userName }}（UID：{{ orderDetail.userId }}）</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">下单时间：</div>
                  <div>{{ orderDetail.createdAt }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type!=4 && type!=5">
                  <div class="seeLeft">订单序号：</div>
                  <div>#{{ orderDetail.takeNo }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">订单编号：</div>
                  <div>{{ orderDetail.outTradeNo }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">实付金额：</div>
                  <div class="wei color-red">+￥{{orderDetail.money}}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">支付状态：</div>
                  <div class="flex flex-center">
                    <div class="color-green">
                      <el-tag type="success" size="mini">已支付</el-tag>
                    </div>
                    <!--                      <div class="color_9" v-if="scope.row.state=='2'"><el-tag type="dager" size="mini">已取消</el-tag></div>-->
                    <!--                      <div class="color-red" v-if="scope.row.state=='3'"><el-tag size="mini">进行中</el-tag></div>-->
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">付款方式：</div>
                  <div>
                    <span><el-tag size="mini" type="success">{{ orderDetail.payModeName }}</el-tag></span>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">订单状态：</div>
                  <div class="flex flex-center">
                    <div v-if="type=='1'">
                            <span style="color: #489620"
                                  v-if="orderDetail.state == '5'||orderDetail.state == '6'"><el-tag type="success" size="mini">已完成</el-tag></span>
                      <span style="color:#155BD4"
                            v-if="orderDetail.state == '2'||orderDetail.state == '3'||orderDetail.state == '4'"><el-tag size="mini">待完成</el-tag></span>
                      <span style="color: #df0029" v-if="orderDetail.state == '9'"><el-tag type="danger" size="mini">退款待处理</el-tag></span>
                      <span style="color: #df0029"
                            v-if="orderDetail.state == '8' || orderDetail.state == '10'"><el-tag type="info" size="mini">已退款</el-tag></span>
                    </div>
                    <div v-if="type=='3'">
                      <div class="color-red" v-if="orderDetail.state=='2'"><el-tag type="dager" size="mini">待接单</el-tag></div>
                      <div class="color-orange" v-if="orderDetail.state=='3'"><el-tag type="warning" size="mini">制作中</el-tag></div>
                      <div class="color-green" v-if="orderDetail.state=='4'"><el-tag type="success" size="mini">已完成</el-tag></div>
                      <div class="color_9" v-if="orderDetail.state=='5'"><el-tag type="info" size="mini">已取消</el-tag></div>
                      <div class="color-red" v-if="orderDetail.state=='6'"><el-tag type="dager" size="mini">申请退款</el-tag></div>
                      <div class="color-red" v-if="orderDetail.state=='7' && orderDetail.refundType=='1'"><el-tag type="info" size="mini">用户申请退款通过</el-tag></div>
                      <div class="color-red" v-if="orderDetail.state=='7' && orderDetail.refundType=='2'"><el-tag type="info" size="mini">商家退款</el-tag></div>
                      <div class="color-red" v-if="orderDetail.state=='8'"><el-tag type="info" size="mini">拒绝退款</el-tag></div>
                      <div class="color-red" v-if="orderDetail.state=='9'"><el-tag type="info" size="mini">商户拒单并退款</el-tag></div>
                    </div>
                    <div v-if="type=='2'">
                      <div class="color-green"
                           v-if="(orderDetail.state=='3' && orderDetail.eatType=='1') || (orderDetail.state=='3' && orderDetail.eatType=='2')">
                        <el-tag type="success" size="mini">已完成</el-tag>
                      </div>
                      <div class="color-orange"
                           v-if="(orderDetail.state=='2' && orderDetail.eatType=='1') || (orderDetail.state=='2' && orderDetail.eatType=='2')">
                        <el-tag type="warning" size="mini">就餐中</el-tag>
                      </div>
                      <div class="color-red" v-if="orderDetail.state=='1' && orderDetail.eatType=='1'"><el-tag type="dager" size="mini">待付款</el-tag></div>
                      <div class="color-red" v-if="orderDetail.state=='1' && orderDetail.eatType=='2'"><el-tag type="dager" size="mini">待接单</el-tag></div>
                      <div class="color_9" v-if="orderDetail.state=='4'"><el-tag type="info" size="mini">已取消</el-tag></div>
                      <div class="color_9" v-if="orderDetail.state=='5'"><el-tag type="info" size="mini">已退款</el-tag></div>
                    </div>
                    <div v-if="type=='4' || type=='5'">
                      <span style="color: #489620"><el-tag type="success" size="mini">已完成</el-tag></span>
                    </div>
                  </div>
                </div>

                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='2'">
                  <div class="seeLeft">就餐时间：</div>
                  <div v-if="orderDetail.completeAt && orderDetail.payAt">
                    {{timeStamp(orderDetail.completeAt-orderDetail.receiptAt)}}
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='2' || type=='3'">
                  <div class="seeLeft">就餐模式：</div>
                  <div class="flex">
                    <div v-if="orderDetail.eatType=='1'">先结账后用餐</div>
                    <div v-if="orderDetail.eatType=='2'">先用餐后结账</div>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='3'">
                  <div class="seeLeft">消费方式：</div>
                  <div>
                    <div class="type2" v-if="orderDetail.isOut=='1'">店内就餐</div>
                    <div class="type2" v-if="orderDetail.isOut=='2'">打包带走</div>
                  </div>
                </div>

<!--                <div class="flex pad_lr_10 bor_b_df5 lh40">-->
<!--                  <div class="seeLeft">配送/自提时间：</div>-->
<!--                  <div>2020-04-19 15.38~立即送出</div>-->
<!--                </div>-->
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='1'">
                  <div class="seeLeft">下单人信息：</div>
                  <div>{{ orderDetail.receivedName }} {{ orderDetail.receivedTel }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='1'">
                  <div class="seeLeft flex-g-0">配送地址：</div>
                  <div class="lh25 flex-g-1">{{ orderDetail.receivedAddress }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">备注：</div>
                  <div>{{ orderDetail.userNote || '无' }}</div>
                </div>
              </div>

              <div class="shuju_title mar_t10" v-if="type==1">
                <div class="shuju_title_text">
                  <span>配送信息</span>
                </div>
              </div>
              <div class="formBox" v-if="type==1">
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">配送方式：</div>
                  <div class="txsq flex">
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='1'">商户配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='2'">达达配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='3'">点我达配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='4'">码科配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='5'">顺丰配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='6'">蜂鸟配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='7'">闪送配送</div>
                    <div class="pad_r_60" v-if="orderDetail.deliveryMode=='10'">自提</div>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="orderDetail.deliveryInfo && orderDetail.deliveryInfo.riderName">
                  <div class="seeLeft">配送员：</div>
                  <div class="">{{ orderDetail.deliveryInfo.riderName }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="orderDetail.deliveryInfo && orderDetail.deliveryInfo.riderTel" >
                  <div class="seeLeft">手机号：</div>
                  <div class="">{{ orderDetail.deliveryInfo.riderTel }}</div>
                </div>
              </div>

            </div>
            <div class="bflex-6 mar_l20">
              <div class="shuju_title">
                <div class="shuju_title_text">
                  <span>订单费用</span>
                </div>
              </div>
              <div class="formBox">
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type!='4' && type!='5'">
                  <div class="seeLeft">商品价格：</div>
                  <div class="wei color-green">+￥{{ orderDetail.originMoney }}<span class="color_9" v-if="type=='1'">（注：商品折扣：￥{{ orderDetail.vipDiscount }}）</span></div>
                </div>
<!--                <div class="flex pad_lr_10 bor_b_df5 lh40">-->
<!--                  <div class="seeLeft">桌位费：</div>-->
<!--                  <div class="wei color-green">+￥2.00<span class="color_9">（注：就餐人数：6*￥2.00）</span></div>-->
<!--                </div>-->
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='1'">
                  <div class="seeLeft">包装费：</div>
                  <div class="wei color-green">+￥{{ orderDetail.boxMoney }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type=='1'">
                  <div class="seeLeft">配送费：</div>
                  <div class="wei color-green">+￥{{ orderDetail.deliveryMoney }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type!='4' && type!='5'">
                  <div class="seeLeft">优惠：</div>
                  <div class="wei color-red">-￥{{ orderDetail.discountMoney }}<span class="color_9">（注：满减：￥{{ orderDetail.preferentialMoney }}，优惠券：￥{{ orderDetail.couponPreferential }}）</span>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">平台服务费：</div>
                  <div class="wei color-red">-￥{{ orderDetail.serviceMoney }}<span class="color_9" v-if="type=='1'">（注：商品：￥{{ orderDetail.serviceGoodMoney }}，包装费：￥{{ orderDetail.serviceBoxMoney }}，配送费：￥{{ orderDetail.serviceDeliveryMoney }}）</span>
                  </div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40" v-if="type!='4' && type!='5'">
                  <div class="seeLeft">平台补贴：</div>
                  <div class="wei color-green">+￥{{ orderDetail.subsidy }}</div>
                </div>
                <div class="flex pad_lr_10 bor_b_df5 lh40">
                  <div class="seeLeft">商户实际收入：</div>
                  <div class="wei color-green">+￥{{ orderDetail.storeActualMoney }}<span class="color-red">（本单顾客实际支付：￥{{ orderDetail.money }}）</span></div>
                </div>
              </div>

              <div class="shuju_title mar_t10"  v-if="type!='4' && type!='5'">
                <div class="shuju_title_text">
                  <span>商品信息</span>
                </div>
              </div>
              <div class="formBox"  v-if="type!='4' && type!='5'">
                <el-table
                    :data="orderDetail.goodsArr"
                    stripe
                    height="300"
                    style="width: 100%"
                    class="tablecenter">
                  <el-table-column
                      prop="name"
                      label="商品名称"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="goodsId"
                      label="商品ID"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="num"
                      label="数量"
                  >
                    <!--                    <template slot-scope="scope">-->
                    <!--                      <div class="flex flex-center">-->
                    <!--                        <div v-if="scope.row.item=='2'" class="color-red wei">-{{ scope.row.money }}元</div>-->
                    <!--                        <div v-if="scope.row.item=='1'" class="color-green wei">+{{ scope.row.money }}元</div>-->
                    <!--                      </div>-->
                    <!--                    </template>-->
                  </el-table-column>
                  <el-table-column
                      prop="money"
                      label="小计（元）"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <!--        <span slot="footer" class="dialog-footer">-->
      <!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
      <!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
      <!--  </span>-->
    </el-dialog>
  </div>
</template>

<script>
import {currencyOrderInfo} from "@/api/statistics";

export default {
  name: "labelSave",
  created() {
  },
  data() {
    return {
      form: {
        id: '',
        name: "",
        sort: "1",
        color: "#ed4014",
      },
      orderDetail: {},
      title: "",
      type: "",
      dialogFormVisible: false,
      list: [],
    }
  },
  components: {},
  methods: {
    async showEdit(outTradeNo,type){
      if (outTradeNo) {
        this.title = "编辑";
        this.type = type
        const {data} = await currencyOrderInfo({outTradeNo,type,});
        this.orderDetail = data;
      }
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    timeStamp(second_time) {
      var time = parseInt(second_time) + "秒";
      if (parseInt(second_time) > 60) {
        var second = parseInt(second_time) % 60;
        var min = parseInt(second_time / 60);
        time = min + "分" + second + "秒";
        if (min > 60) {
          min = parseInt(second_time / 60) % 60;
          var hour = parseInt(parseInt(second_time / 60) / 60);
          time = hour + "小时" + min + "分" + second + "秒";
          if (hour > 24) {
            hour = parseInt(parseInt(second_time / 60) / 60) % 24;
            var day = parseInt(parseInt(parseInt(second_time / 60) / 60) / 24);
            time = day + "天" + hour + "小时" + min + "分" + second + "秒";
          }
        }
      }
      return time;
    },
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const {msg} = await labelSave(this.form);
          this.$baseMessage(msg, "success");
          this.$emit("fetchData");
          this.close();
        } else {
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss">
.ddxq {
  .formBox {
    padding: 10px;
    border: 1px solid #DCDCDC;

    .seeLeft {
      width: 120px;
    }
  }

  .el-dialog {
    min-width: 1200px;
  }

  .el-dialog__body {
    padding: 0px 20px 20px 20px;
  }
}
</style>
